<template>
    <el-dialog :title="detailData1.plateNo" :visible.sync="outerVisible" width="1200px">
        <div class="flex flex-direction ">
            <div v-loading="detailLoading" class="flex">
                <div class="flex-sub margin-right flex flex-direction">
                    <div style="width: 150px; z-index: 999; text-align: right; position: absolute; right: 20px; top: 65px;">
                        <el-button size="mini" type="primary" icon="el-icon-arrow-left"
                                   @click="getParentDetails(indexs -1)">
                            上一条
                        </el-button>
                        <el-button size="mini" type="primary"
                                   @click="getParentDetails(indexs +1)">
                            下一条<i class="el-icon-arrow-right el-icon--right" />
                        </el-button>
                    </div>
                    <vehicle-info :detail-data="detailData1" />
                    <div class="flex  margin-top-sm" style="margin-top: 10px;">
                        <!--                        <el-button v-show="step !='qt'" size="mini" type="primary" icon="el-icon-edit" style="width: 120px;" @click="handleEdit">编辑驾驶员信息</el-button>-->
                    </div>
                </div>
                <vehicle-media :detail-data="detailData1" style="width: 50%;" />
            </div>
            <el-table ref="orderTable" v-loading="isLoading" class="actionTable" stripe :data="tableData" size="mini"
                      highlight-current-row   header-cell-class-name="table-header" style="width: 100%; margin-top: -15px;" max-height="200">
                <el-table-column label="车牌号码" width="100" prop="plateNo" />
                <el-table-column label="入场时间" width="150">
                    <template slot-scope="scope">
                        {{ moment(scope.row.gmtEntry).format('YYYY-MM-DD HH:mm:ss') }}
                    </template>
                </el-table-column>
                <el-table-column label="出场时间" width="150">
                    <template slot-scope="scope">
                        {{ moment(scope.row.gmtLeave).format('YYYY-MM-DD HH:mm:ss') }}
                    </template>
                </el-table-column>
                <el-table-column label="本次检测车货总重（kg）" width="160" prop="entranceWeight" />
                <el-table-column label="车辆本次检测长度（CM）" width="165" prop="currentLength" />
                <el-table-column label="车辆本次检测宽度（CM）" width="165" prop="currentWidth" />
                <el-table-column label="车辆本次检测高度（CM）" width="165" prop="currentHeight" />
                <el-table-column label="操作" width="100" align="center">
                    <template slot-scope="scope">
                        <el-button size="mini" type="text" icon="el-icon-view" @click="handleView(scope.$index)">查看详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </el-dialog>
</template>

<script>
// import {UpdateBasicInformation, InsertBasicInformation} from '@/api/overrunPenaltyApi';
import {GetDetailedHistory} from '@/api/parkUnloadApi';
import moment from 'moment';
import VehicleInfo from '@/modules/components/VehicleDetail/vehicle-infohistory';
import VehicleMedia from '@/modules/components/VehicleDetail/vehicle-media';
export default {
    name: 'WeightInformation',
    components: {
        VehicleInfo, VehicleMedia
    },
    model: {
        prop: 'value',
        event: 'change'
    },
    props: {
        information: Object,
        initDetailData: Object,
        // deviceType: Object,
        // 当前返回list的条数
        tableSize: Number,
        // 当前选中列在数据中的下标值
        indexs: Number,
        // 当前页
        currentPage: Number,
        // 当前查询的数据的总条数(分页的总数)
        total: Number,
        isAdd: {
            type: Boolean,
            default: false
        },
        step: String
    },
    data() {
        return {
            // 处罚对象单位信息和处罚对象个人信息单选
            radio: '',
            totalCount: 0,
            unitInfoUnable: false,
            personInfoUnable: false,
            outerVisible: false,
            detailLoading: false,
            isDisabled: false,
            invalidReasonFlag: false,
            isLoading : false,
            isIllegal: '',
            tableData: [],
            detailData1: [],
            // index: 0,
            queryParams: {

            }
        };
    },
    watch: {

        detailData(newValue, oldValue){
            this.initForm();

        }
    },
    mounted() {
        this.initForm();

    },
    computed: {
        detailData() {
            var data =  this.initDetailData;
            this.detailData1 = data;
            return data;
        }
    },
    methods: {
        moment,
        initForm() {
            GetDetailedHistory({detectionHistoryId: this.initDetailData.detectionHistoryId}).then(res => {
                    this.tableData = res.res.GetDetailedHistory;
            }).catch(err => {
                this.isLoading = false;
                console.log(err);
            });
        },
        show() {
            this.outerVisible = true;
        },
        showHandleResult(param) {
            if (param.target.tagName == 'SPAN') {
                this.invalidReasonFlag = true;
            }

        },
        handleView(i){
            this.index = i;
            this.detailData1 = this.tableData[i];
        },
        getParentDetails(index) {
            console.log(index);
            if (index < 0) {
                if (this.currentPage == 1) {
                    this.$message({
                        message: '已是第一条',
                        type: 'warning'
                    });
                    return false;
                } else {
                    this.$emit('getList', this.currentPage - 1);
                    index = 0;
                    setTimeout(() => {
                        this.$emit('handleView', index);
                    }, 1000);
                }
            }
            if (this.tableSize == index) {

                if (((this.currentPage - 1) * 20 + index + 1) > this.total) {
                    this.$message({
                        message: '已是最后一条',
                        type: 'warning'
                    });
                    return false;
                } else {
                    this.$emit('getList', this.currentPage + 1);
                    index = 0;
                    setTimeout(() => {
                        this.$emit('handleView', index);
                    }, 1000);
                    return false;
                }
            }
            this.$emit('handleViews', index);
        },
        isBlank(str) {
            return !this.isNotBlank(str);
        },
        isNotBlank(str) {
            if (str != null && str != undefined && str != '' & str != ' ') {
                return true;
            }
            return false;
        }
    }
};
</script>

<style scoped>
>>>.el-button--mini,
>>>.el-button--mini.is-round {
    padding: 7px 5px;
}
>>>.el-tabs__header {
    padding: 0;
    position: relative;
    margin: 0;
}
/deep/
.el-dialog__body {
    padding: 10px 20px;
}
/deep/
.el-dialog__header {
    padding: 20px 20px 10px;
    border-bottom: 1px solid #dcdfe6;
}

</style>
